<template>
  <el-main class="match-index" :style="{ height: 100 + 'vh' }">
    <!-- container-xl -->
    <div class="container-content">
      <div class="">
        <div class="imgaa">
          <el-button type="primary" class="matchlink"
            @click="$router.push(`/questionbank/${match.ID}`)">返回题单主页</el-button>

          <h3 v-if="!show">自动评卷中，预计10秒内完成……</h3>
          <h3 v-else v-text="match?.name"></h3>
          <div class="fen" v-if="match?.isdf">
            <div>
              <span class="fen-label">得分：</span>
              <h1>{{ df }}</h1>
            </div>
            <div>
              <span class="fen-label">得分率：</span>
              <h1>{{ dfRate }}</h1>
              <span>%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div class="bg-white m-p-6">
          <el-table v-show="data.length" :data="data" border style="width: 100%">
            <template v-slot:empty>
              <el-empty image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png" />
            </template>
            <el-table-column type="index" width="50" />
            <el-table-column prop="question.name" label="题目">
              <template #default="scope">
                <router-link class="aaa" target="_blank" :to="{
                  name: '题目',
                  params: {
                    ID: scope.row.questionid
                  },
                  query: { questionbankid: scope.row.questionbankid },
                }">{{ scope.row.question.name }}</router-link>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column prop="language" label="语言">
              <template #default="scope">
                <div v-if="scope.row.language.toLocaleUpperCase() === 'PYTHON'">
                  Python
                </div>
                <div v-else-if="scope.row.language.toLocaleUpperCase() === 'CPP'">
                  C++
                </div>
                <div v-else-if="scope.row.language.toLocaleUpperCase() === 'C++'">
                  C++
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="resultdata" label="答题结果" width="180"></el-table-column>
            <el-table-column prop="context" label="我的答案" width="100">
              <template #default="scope">
                <div v-if="scope.row.type === '代码'">
                  <el-button text @click="down(scope.row)">下载源码</el-button>
                </div>
                <div v-else>{{ scope.row.info.answer }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="result" label="测试点" width="350">
              <template #default="scope">
                <div v-if="Array.isArray(scope.row.resultdataarr)">
                  [
                  <span v-for="(v, key) in scope.row.resultdataarr" :key="'a_' + key">
                    <span :class="ALLTYPE[v][1]">{{ v }}</span>
                    {{ key !== scope.row.resultdataarr.length - 1 ? "," : "" }}
                  </span>
                  ]
                </div>
                <div v-else></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </el-main>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import {
  computed,
  onMounted,
  ref,
  watch
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { asyncselectuserquestion } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { ALLTYPE } from "@/util/jianchatime";

const p = defineProps<{ time: any, match: Studycodemodel.Iquestionbank, statematch?: "开始" | "结束", testid: string }>()

const df = computed(() => {
  let score = 0;
  data.value.forEach(e => {
    score += e.df || 0;
  })
  return Math.floor(score);
});
const dfRate = computed(() => {
  return Math.floor(data.value.filter(e => e.df).length / data.value.length * 100)
});

const data = ref<Studycodemodel.Iuserquestion[]>([]);

const count = ref(0);
const show = computed(() => {
  return data.value.length;
});
const store = useStore(Storekey);
const router = useRouter();
const route = useRoute();
const roue = computed(() => {
  return route.query;
});
const user = computed(() => {
  return store.state.user;
});
const testid = computed(() => {
  const n = route.query.testid;
  if (n && typeof n === "string") {
    return n;
  }
  return p.testid;
});
watch(
  () => testid.value,
  () => {
    if (testid.value) {
      start();
    }
  }
);
watch(
  () => p.statematch,
  (d) => {
    if (d === "结束") {
      start();
    } else if (d === "开始") {
      ElMessage.info("开始判题");
    }
  }
);

onMounted(() => {
  start();
  setTimeout(start, 50000);
});

async function start() {
  if (!user.value) {
    ElMessage.error("请登录");
    router.push("/");
    return;
  }
  if (!testid.value) {
    return;
  }

  try {
    const d = await asyncselectuserquestion({
      testid: testid.value,
      userid: user.value.ID,
      _order: 'ID',
      _sortable: 'DESC'
    });
    count.value = d.count;
    data.value = d.rows
      .sort((a, b) => {
        return (
          Number(
            p.match.questionquestionbank?.find(
              (v) => v.questionid === a.questionid
            )?.sortindex
          ) -
          Number(
            p.match.questionquestionbank?.find(
              (v) => v.questionid === b.questionid
            )?.sortindex
          )
        );
      })
  } catch (e: any) {
    ElMessage.info(e);
  }
}



function down(row: Studycodemodel.Iuserquestion) {
  const { context, language } = row;
  if (context) {
    let t = ".cpp";
    if ("c" === language) {
      t = ".c";
    }
    if ("python" === language) {
      t = ".py";
    }
    const bo = new File(
      [context],
      row.user?.name + "_" + row.question?.name + t,
      {
        type: "text/plain",
      }
    );
    var a = document.createElement("a");
    a.download = row.user?.name + "_" + row.question?.name + t;
    a.href = URL.createObjectURL(bo);
    a.click();
  } else {
    ElMessage.error("代码为空");
  }
}
</script>

<style scoped>
.match-index {
  padding: var(--container-margin) 5% 0;
  /* margin: var(--container-margin) 0rem 0 0rem; */
  /* 外边距 */
  --container-margin: 20px;
  --container-header-height: 10vh;
  --container-bg-color: #fff;

  background-repeat: repeat;
  padding-top: 96px;
  background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/bc_jinrubishai.png);
  background-size: cover;
  background-position: center;
}

.container-content {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

h3 {
  color: #1a1a1a;
  font-size: 32px;
  font-weight: bold;
}

h1 {
  font-size: 50px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: var(--color-cheng);
  display: inline-block;
}

.fen {
  margin-bottom: 10px;
  /* min-width: 330px; */
  height: 158px;
  position: absolute;
  left: -25px;
  top: 138px;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: inherit;
  padding-left: 73px;
  padding-right: 73px;
  padding-top: 24px;
  color: var(--color-cheng);
  box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.08);
  border-radius: 0px 24px 24px 0px;

  display: flex;
}

.fen-label {
  font-size: 28px;
}

.fen h1 {
  font-weight: bold;
  font-size: 96px;
  display: inline-block;
  margin-right: 20px;
}

.fen span {
  font-size: 28px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.time {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333;
  margin-bottom: 30px;
  margin-top: 52px;
}

.text-center {
  width: 1200px;
  background: #ffffff;
  border-radius: 10px;
  padding: 21px;
  margin: 0 auto;
  padding-bottom: 35px;
}

.di {
  margin-right: -30px;
}

.dit {
  border-radius: 10px;
  border: 1px solid #f4f5f7;
  border-radius: 10px;
  margin-bottom: 30px;
  margin-right: 40px;
  margin-left: 20px;
}

.dit-code {
  height: 140px;
}

.dit-1 {
  height: 110px;
}

.dit-1 header {
  text-align: center;
}

.t {
  font-size: 32px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fff;
  margin-right: 20px;
  line-height: 46px;
  background-image: url(../../../assets/image/sess.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.l {
  font-size: 32px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fff;
  line-height: 46px;
  background-image: url(../../../assets/image/error.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.e {
  border-top: 1px solid #dcdfe6;
  text-align: left;
  padding-left: 5px;
}

.e div {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 30px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-align: center;
  margin: 4px;
}

.divfalse {
  background: #f56c6c;
  color: #fff;
}

.divtrue {
  background: #3ac2a2;
  color: #fff;
}

.code {
  padding-bottom: 10px;
}

.code span {
  width: 60px;
  line-height: 30px;
  border-radius: 9px;
  border: 1px solid #000;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--cloor-303133);
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

.code div {
  font-size: 18px;
  line-height: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: var(--cloor-303133);
  margin-top: 15px;
}

.cu {
  cursor: pointer;
}

.imgaa {
  height: 320px;
  /* background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/oj_bisaijiesuanbanner.png); */
  background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/saas-banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 48px 0;
  position: relative;
}

.imgaa h3 {
  font-size: 36px;
  color: var(--color-1f);
  padding: 10px 0;
  color: var(--color-1f);
  background: rgba(255, 255, 255, 0.5);
}

.aaa {
  color: var(--color-43);
  text-decoration: none;
}


.matchlink {
  position: absolute;
  top: 24px;
  right: 24px;
}
</style>